<template>
  <el-table
    ref="tableRef"
    v-bind="$attrs"
    :border="border"
    @select="(value) => emit('select', value)"
    @select-all="(value) => emit('select-all', value)"
    @selection-change="(value) => emit('selection-change', value)"
    @cell-click="(row, column, cell, event) => emit('cell-click', { row, column, cell, event })"
    @row-click="(row, column, event) => emit('row-click', { row, column, event })"
    @header-click="(column, event) => emit('header-click', { column, event })"
    @sort-change="(value) => emit('sort-change', value)"
    @filter-change="(value) => emit('filter-change', value)"
    @expand-change="(row, expandedRows) => emit('expand-change', { row, expandedRows })"
  >
    <!-- default -->
    <el-table-column v-if="showSelection" type="selection" width="55" />
    <template v-for="(item, index) in columns" :key="item.prop || index">
      <el-table-column
        v-bind="item"
        :align="item.align || 'center'"
        :prop="item.prop"
        :fixed="item.fixed"
        :width="item.width"
      >
        <template #header="scope">
          <slot v-if="item.headerSlot" :name="item.headerSlot" :row="{ ...scope }">
            {{ item.label }}
          </slot>
        </template>
        <template #default="scope">
          <slot
            :name="item.slot"
            :item="scope.row"
            :column="scope.column"
            :cellIndex="scope.cellIndex"
            :index="scope.$index"
          >
            {{ scope.row[item.prop] || item.text }}
          </slot>
        </template>
      </el-table-column>
    </template>
    <!-- empty -->
    <template #empty>
      <slot name="empty">
        <el-empty :description="emptyText">
          <template #default>
            <slot name="empty" />
          </template>
        </el-empty>
      </slot>
    </template>
  </el-table>
  <!-- pagination -->
  <slot name="pagination">
    <el-pagination
      v-if="showPagination"
      v-model:current-page="page"
      v-model:page-size="pageSize"
      :layout="layout"
      :total="total"
      :page-sizes="pageSizes"
      :background="background"
      hide-on-single-page
      class="pagination flex"
      @change="(currentPage, sizes) => emit('change', { currentPage, sizes })"
    >
    </el-pagination>
  </slot>
</template>

<script setup>
import { tableProps, paginationProps } from './props'

const props = defineProps({
  ...tableProps,
  ...paginationProps,
})
const emit = defineEmits([
  'select',
  'select-all',
  'selection-change',
  'cell-click',
  'row-click',
  'header-click',
  'sort-change',
  'filter-change',
  'expand-change',
  'change',
  'click-btn',
])

const attrs = useAttrs()

const tableRef = ref(null)
const page = ref(1)
const pageSize = ref(10)
const maxHeight = ref(null)

onMounted(async () => {
  if (props.fixedHeight) {
    await nextTick()
    maxHeight.value = getMaxHeight()
  }
})

function getMaxHeight() {
  if (attrs?.['max-height']) {
    return attrs?.['max-height']
  }

  const mainEl = getElClientHeight('main-box')
  const pageTitleEl = getElClientHeight('page-title')
  const cardEl = getElClientHeight('card-box')

  return `${mainEl - pageTitleEl - cardEl - 30}px`
}

function getElClientHeight(className) {
  const el = document.querySelector(`.${className}`)
  return +el?.clientHeight || 0
}
</script>

<style lang="scss" scoped>
:deep(.el-scrollbar) {
  height: auto !important;
  padding-top: 0 !important;
}

.pagination {
  justify-content: flex-end;
  margin-top: $space-small;
}
</style>
